{% extends 'base/base.html' %}

{% block title %}
<title>搜索结果</title>
{% endblock %}

{% block body %}

<style>
    .list-group-item {
        display: flex; /* 使用Flexbox布局 */
        align-items: center; /* 垂直居中 */
        margin-bottom: 10px; /* 添加一些底部间距 */
    }
    .list-group-item img {
        margin-right: 20px; /* 在图片和文本之间添加间距 */
        width: 100px; /* 设置图片宽度 */
        height: auto; /* 高度自适应 */
    }
</style>

{% if query %}
<h3>搜索结果如下：</h3>

<ul class="list-group">
    {% for result in page.object_list %}
    <li class="list-group-item">
        <div class="col-md-4">
            <a href="{% url 'main:detail' result.object.id %}">
                <img src="/media/{{ result.object.thumb_image }}" class="img-responsive" alt="Responsive image">
            </a>
        </div>
        <div class="col-md-8">
            <h3>书名: {{ result.object.title }}</h3>
            <h3>简介 : {{ result.object.description }}</h3>
            <h3>下载次数 : {{ result.object.views }}</h3>
            <h3>收藏次数 : {{ result.object.favorite_count }}</h3>
        </div>
    </li>
    {% empty %}
    <p>啥也没找到</p>
    {% endfor %}

</ul>


{% endif %}
{% endblock %}